import React, { Component } from 'react';
import { Col } from 'antd';
import './Select.less';

export default class Select extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data,
            product: this.props.data[0].product,
            select: this.props.data[0].select,
            type_tap: 0,
            product_tap: -1,
            select_item: "",
            current_product: "",
            current_model: this.props.data[0].model
        };
    }
    type_handleClick(val, e) {
        let _this = this;
        this.state.data.map((data) => {
            let type = data.type;
            if (type === val) {
                _this.setState({
                    product: data.product,
                    select: data.select
                });
            }
        });

        let index = e.target.getAttribute("data-index");
        let model = e.target.getAttribute("data-model");

        this.setState({
            type_tap: index,
            product_tap: -1,
            select_item: "",
            current_model: model
        });

        this.props.selectCallback("model", model, "", "", "");
    }
    product_handleClick(val, e) {
        let index = e.target.getAttribute("data-index");
        let desc = e.target.getAttribute("data-desc");
        this.setState({
            product_tap: index,
            current_product: desc
        });

        this.product_handleClick_callback(desc);
    }
    select_handleClick(desc, val, e) {
        let item = val + "-";
        let value = "";
        if (this.state.select_item.indexOf(item) >= 0) {
            value = this.state.select_item.replace(item, "");
        } else {
            value = this.state.select_item + item;
        }
        this.setState({
            select_item: value
        });

        this.select_handleClick_callback(desc, val);
    }

    product_handleClick_callback(val) {

        let type = "product";
        let model = this.state.current_model;
        let product = val;
        let selecttype = "";
        let selectvalue = "";

        this.props.selectCallback(type, model, product, selecttype, selectvalue);
    }
    select_handleClick_callback(select_type, val) {
        let type = "select";
        let model = this.state.current_model;
        let product = this.state.current_product;
        let selecttype = select_type;
        let selectvalue = val;

        this.props.selectCallback(type, model, product, selecttype, selectvalue);
    }

    render() {
        let _this = this;
        return (
            <div className="wrap-select">
                <div className="row-type">
                    <Col span={24}>
                        <article>{
                            this.state.data.map(function (val, index) {
                                return <p className={_this.state.type_tap === index ? 'p-context-tap' : 'p-context'}
                                    data-index={index}
                                    data-model={val.model}
                                    onClick={(event) => _this.type_handleClick(val.type, event)}
                                    key={index}>{val.type}</p>
                            })}
                        </article>
                    </Col>
                </div>
                <div className="row-type">
                    <Col span={24}>
                        <article>
                            <p>产品分类</p>{
                                this.state.product.map(function (e, index) {
                                    return <p className={_this.state.product_tap === index ? 'p-context-tap' : 'p-context'}
                                        data-index={index}
                                        data-desc={e.desc}
                                        onClick={(event) => _this.product_handleClick(e.desc, event)}
                                        key={index}>{e.title}</p>
                                })}
                        </article>
                    </Col>
                </div>
                <div className="row-type">
                    <Col span={24}>
                        <article>
                            <p>标签查询</p>{
                                this.state.select.map(function (e, index) {
                                    return <p className={_this.state.select_item.indexOf(e.title + "-") >= 0 ? 'p-context-search-tap' : 'p-context-search'}
                                        onClick={(event) => _this.select_handleClick(e.desc, e.title, event)}
                                        key={index}>{e.title}</p>
                                })}
                        </article>
                    </Col>
                </div>
            </div>
        );
    }
}